<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  <title>2020 爱你爱你</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="title">
    <img src="./images/title.png" width="100%" alt="">
  </div>

  <div class="content">
    <ul class="tab">
      <!-- <li class="nav-item active" onclick="toggle(0)" data-gift-id="0">所有礼物</li> -->
      <li class="nav-item active" onclick="toggle(0)">爱情锁</li>
      <li class="nav-item" onclick="toggle(1)">爱情钥匙</li>
    </ul>

    <div class="desc-box">
      <div class="tt"></div>
      <p class="tt-desc">2020年2月14日</p>

      <div style="width: 8rem;height: 3.733333rem; position: relative; margin: 0 auto;">
        <div class="headwear-box">
          <div class="rank-pic">
          </div>
          <div class="rank-pic">
          </div>
        </div>
      </div>
      
      
      <div class="line-box">
        <div class="line-left"></div>
        <p class="line-desc">活动奖励</p>
        <div class="line-right"></div>
      </div>
      <div class="clear-fix"></div>
      <div class="text-desc-box">
        <p class="text-desc">1、活动当日真爱榜第一名（指定礼物榜重复用户，只记录一次）获得冠名定制礼物特权，获奖用户请于次日主动联系官方进行冠名定制登记，官方将按照用户意愿对礼物进行冠名设计；</p>
        <p class="text-desc">2、指定礼物（爱情锁、爱情钥匙）仅限情人节当天公放哦！快去送给中意的TA；</p>
        <p class="text-desc">3、定制礼物将在2020年02月16日零时上架；</p>
        <p class="text-desc">4、冠名礼物有效期为7天，7天内将会自动下架，不要忘了要及时送出礼物宣告真爱哦~</p>
      </div>
      
    </div>
  </div>
  <div class="bottom">
    <div class="head-pic-box">
      <div class="head-pic">

      </div>
      <div class="head-pic"></div>
    </div>
    <div class="bottom-desc">
      <p class="rr"></p>
    </div>
  </div>
</body>
<script src="./base.js"></script>
<script>
  var baseApiUrl = "https://ztaudio-api.whzcth.com:8866"
  // var baseApiUrl = "http://test-ztaudio-api.ikeke.ltd"
  // 获取真爱指定礼物
  
  getAppointGifts()
  getGifts(0)
  function getAppointGifts() {
    var requestData = {
      requestType: 'GET',
      url: baseApiUrl + '/gift/get_appoint',
      para: { type: 2 },
      response: 'getAppointGiftsCallback'
    };
    sendRequest(requestData);
  }

  function getAppointGiftsCallback(res) {
    res = jsonParse(res)
    try{
      var data = res.data.list
      var dom = document.getElementsByClassName('nav-item')
      for(var i=0; i < data.length; i++) {
        dom[i].textContent = data[i].name
        dom[i].setAttribute('data-gift-id', data[i].gift_id)
      }
    }catch(err) {
      console.log(err)
    }
  }

  function getGifts(gift_id) {
    var data = { }
    data.type = 1
    data.gift_id = gift_id
    var requestData = {
      requestType: 'GET',
      url: baseApiUrl + '/gift/get_love_rank',
      para: data,
      response: 'getGiftsCallback'
    };
    sendRequest(requestData);
  }

  function getGiftsCallback(res) {
    res = jsonParse(res)
    var data = res.data.list[0]
    try{
      var curr_user = res.data.curr_user_is_online
      var dom = document.getElementsByClassName('rank-pic')
      dom[0].innerHTML = "<img src='"+ data.from_user.image +"' width='100%'>"
      dom[1].innerHTML = "<img src='" + data.to_user.image + "' width='100%'>"

      var dom = document.getElementsByClassName('head-pic')
      dom[0].innerHTML = "<img src='"+ curr_user.image +"' width='100%'>"
      dom[1].innerHTML = "<img src='" + curr_user.to_image + "' width='100%'>"

      dom = document.getElementsByClassName('rr')
      dom[0].textContent = curr_user.is_online_ranking
    }catch(err){
      console.log(err)
    }
  }

  function jsonParse(res) {
    res = CryptoJS.enc.Base64.parse(res);
    result = res.toString(CryptoJS.enc.Utf8);
    result = eval("(" + result + ")");
    return result;
  }

  function toggle(params) {
    var dom = document.getElementsByClassName('nav-item')
    var gift_id = 0
    for(var i=0; i< dom.length;i ++) {
      var classVal = dom[i].getAttribute('class')
      classVal = classVal.replace('active', '')
      dom[i].setAttribute('class', classVal)

      if(i == params) {
        classVal = classVal.concat(" active")
        dom[i].setAttribute('class', classVal)
        gift_id = dom[i].getAttribute('data-gift-id')
      }
    }
    getGifts(gift_id)
  }
  function isIOS() {
    return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  }
  function isAndroid () {
    return navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1;
  }
  function sendRequest(data) {
    if (isAndroid()) {
      keke.commonRequestAction(JSON.stringify(data));
    } else if (isIOS()) {
      window.webkit.messageHandlers.commonRequestAction.postMessage(data);
    }
  }
</script>
</html>